<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="700px"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        v-loading="loading"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="当事人姓名" prop="name" label-width="100px">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone" label-width="100px">
              <el-input v-model="ruleForm.phone" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item label="是否资金端" prop="warnType" label-width="100px">
            <el-radio-group v-model="ruleForm.warnType">
              <el-radio label="资金端"></el-radio>
              <el-radio label="非资金端"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="下发" prop="warnCount" label-width="60px">
              <div style="display: flex">
                <el-input
                  v-model="ruleForm.warnCount"
                  style="width: 80px"
                ></el-input>
                <div style="margin-left: 10px; font-weight: 700">次预警</div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label=" " prop="moneyCount" label-width="60px">
              <div style="display: flex">
                <el-input
                  v-model="ruleForm.moneyCount"
                  style="width: 80px"
                ></el-input>
                <div style="margin-left: 10px; font-weight: 700">次资金端</div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item
            label="最后一次资金端金额"
            prop="lastMoney"
            label-width="160px"
          >
            <div style="display: flex">
              <el-input
                v-model="ruleForm.lastMoney"
                style="width: 80px"
              ></el-input>
              <div style="margin-left: 10px; font-weight: 700">元</div>
            </div>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item
            label="最近一次资金端日期"
            prop="createTime"
            label-width="160px"
          >
            <el-date-picker
              v-model="ruleForm.createTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-row>

        <el-row v-if="title == '编辑预警'">
          <el-form-item label="出警状态" label-width="90px" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio v-model="ruleForm.status" label="0">待劝阻</el-radio>
              <el-radio v-model="ruleForm.status" label="1">劝阻中</el-radio>
              <el-radio v-model="ruleForm.status" label="2">已完成</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>

        <el-row v-if="title == '编辑预警'">
          <el-form-item label="备注" label-width="60px">
            <el-input v-model="ruleForm.remarks"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="上传 MP3 文件" prop="voice" label-width="160px">
            <audio v-if="voiceList.length > 0" controls>
              <source :src="voiceList[0].url" type="audio/mpeg" />
              Your browser does not support the audio element.
            </audio>
            <el-upload
              class="upload-demo"
              ref="mp3Uploader"
              action="#"
              :auto-upload="false"
              :on-change="handleBeforeUpload"
              :before-upload="beforeUpload"
              :on-remove="handleRemove"
              :file-list="voiceList"
              :limit="1"
              accept=".mp3"
            >
              <el-button size="small" type="primary"> 更改录音 </el-button>
              <div slot="tip" class="el-upload__tip">
                仅支持 MP3 文件，每次仅能上传一个文件
              </div>
            </el-upload>
          </el-form-item>
        </el-row>

        <el-form-item style="text-align: center">
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { saveOrUpdate, getDetailById, uploadFile } from "@/api/counterfraud";

export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      title: "新增",
      ruleForm: {
        name: "",
        warnType: "",
        phone: "",
        warnCount: "",
        moneyCount: "",
        lastMoney: "",
        createTime: "",
        status: "",
        remarks: "",
        voice: null,
      },
      voiceList: [],
      rules: {
        name: [{ required: true, message: "当事人姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入有效的手机号",
            trigger: "blur",
          },
        ],
        warnCount: [{ required: true, message: "预警次数", trigger: "blur" }],
        moneyCount: [
          { required: true, message: "资金端次数", trigger: "blur" },
        ],
        warnType: [
          { required: true, message: "是否资金端", trigger: "change" },
        ],
        lastMoney: [
          { required: true, message: "最后一次资金端金额", trigger: "blur" },
        ],
        createTime: [
          { required: true, message: "最近一次资金端日期", trigger: "change" },
        ],
        status: [
          { required: true, message: "请选择出警状态", trigger: "change" },
        ],
        voice: [
          { required: true, message: "请上传 MP3 文件", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    beforeUpload(file) {
      console.log(file);
      const isMP3 = file.type === "audio/mpeg";
      if (!isMP3) {
        this.$message.error("仅支持 MP3 文件上传");
      }
      return isMP3;
    },
    handleRemove() {
      this.voiceList = [];
      this.ruleForm.voice = null;
    },
    handleBeforeUpload(file) {
      console.log(file);
      let wfForm = new FormData();
      wfForm.append("multipartFiles", file.raw);
      uploadFile(wfForm).then((res) => {
        this.ruleForm.voice = res.data[0].absolutePath;
        this.voiceList = [
          {
            uid: Date.now(), // 使用当前时间戳作为唯一标识符
            name: file.name,
            url: this.ruleForm.voice,
          },
        ];
      });
    },
    init(type, info) {
      if (type == "add") {
        this.title = "新增预警";
        this.$nextTick(() => {
          this.resetForm("ruleForm");
          this.voiceList = [
            {
              uid: Date.now(), // 使用当前时间戳作为唯一标识符
              name: this.tableData[0].voice,
              url: this.tableData[0].voice,
            },
          ];
          this.ruleForm = {
            name: "",
            warnType: "",
            phone: "",
            warnCount: "",
            moneyCount: "",
            lastMoney: "",
            createTime: "",
            status: "",
            remarks: "",
            voice: this.tableData[0].voice,
          };
        });
      } else {
        this.title = "编辑预警";
        this.$nextTick(() => {
          this.resetForm("ruleForm");
          this.loading = true;
          getDetailById(info.id)
            .then((res) => {
              this.loading = false;
              this.ruleForm = JSON.parse(JSON.stringify(res.data));
              if (this.ruleForm.status == "") {
                this.ruleForm.status = "0";
              }
              if (this.ruleForm.voice == undefined) {
                this.ruleForm.voice = null;
              }
              if (res.data.voice) {
                this.voiceList = [
                  {
                    uid: 123123,
                    name: res.data.voice.split("\\").pop(),
                    url: res.data.voice,
                  },
                ];
              } else {
                this.voiceList = [];
              }
            })
            .catch((err) => {
              this.loading = false;
              this.dialogVisible = false;
            });
        });
      }
      this.dialogVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          saveOrUpdate(this.ruleForm)
            .then((res) => {
              this.loading = false;
              if (res.code == "0000") {
                this.dialogVisible = false;
                this.$emit("addEmit");
              }
            })
            .catch((err) => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      //   this.voiceList = [];
      this.voiceList = this.voiceList;
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped></style>
